var solids = document.getElementsByClassName("solid")[0];
var carousel = document.getElementsByClassName("carousel")[0];
var solidTimes = document.getElementsByClassName("solid-time");
var width = carousel.clientWidth;
solids.append(solids.firstElementChild.cloneNode(true));
solids.style.width = width * solids.childElementCount + 'px';
for (var i = 0; i < solidTimes.length; i++) {
    solidTimes[i].style.width = width + 'px';
    solidTimes[i].style.height = carousel.clientHeight + 'px';
}
solids.style.transition = 'left 300ms linear';
var index = 0;
var timer;

function moveLeft() {
    index++;
    switchIndicator();
    if (index === solidTimes.length - 1) {
        solids.style.left = -index * width + 'px';
        setTimeout(function () {
            solids.style.transition = '';
            index = 0;
            switchIndicator();
            solids.style.left = -index * width + 'px';
            setTimeout(function () {
                solids.style.transition = 'left 300ms linear';
            }, 300)
        }, 3000);
    } else {
        solids.style.left = -index * width + 'px';
    }
}
function moveRight() {
    index--;
    console.log(index);
    switchIndicator();
    if (index < 0) {
        index = 3;
        carousel.log(index);
        switchIndicator();
        solids.style.transition = '';
        solids.style.left = -index * width + 'px';
        setTimeout(function () {
            solids.style.transition = 'left 300ms linear';
            index--;
            switchIndicator();
            solids.style.left = -index * width + 'px';
        }, 300)
    }
    else if (index === 0) {
        solids.style.left = -index * width + 'px';
        setTimeout(function () {
            solids.style.transition = '';
            index = 3;
            solids.style.left = -index * width + 'px';
            setTimeout(function () {
                solids.style.transition = 'left 300ms linear';
            }, 300)
        }, 3000);
    } else
    {
        solids.style.left = -index * width + 'px';
    }
}
timer = setInterval(moveLeft, 3000);
var leftBtn = document.getElementsByClassName("left-btn")[0];
var rightBtn = document.getElementsByClassName("right-btn")[0];
rightBtn.onclick = function () {
    clearInterval(timer);
    moveLeft();
    timer = setInterval(moveLeft, 3000);
}
leftBtn.onclick = function () {
    clearInterval(timer);
    moveRight();
    timer = setInterval(moveLeft, 3000);
}
function switchIndicator(){
    var itme=document.getElementsByClassName("indicator")[0].getElementsByClassName("itme")
    for (var i = 0; i < itme.length; i++) {
        if(i===index){
            itme[i].className='itme actives'
        }
        else{
            itme[i].className='itme'
        }
    } for (let i = 0; i < itme.length; i++) {
        itme[i].onclick=function (){
            clearInterval(timer);
            index=i;
            solids.style.left=-index * width + 'px';
            switchIndicator();
            timer = setInterval(moveLeft, 3000);
        }
    }
}
